Create request modal components to cleanup the views

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

@@ -0,0 +1,46 @@
+import { COSMOS_MAINNET_CHAINS, TCosmosChain } from '@/data/COSMOSData'
+import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
+import { Col, Divider, Row, Text } from '@nextui-org/react'
+import { Fragment } from 'react'
+
+/**
+ * Types
+ */
+interface IProps {
+  chains: string[]
+  protocol: string
+}
+
+/**
+ * Component
+ */
+export default function RequesDetailsCard({ chains, protocol }: IProps) {
+  return (
+    <Fragment>
+      <Row>
+        <Col>
+          <Text h5>Blockchain(s)</Text>
+          <Text color="$gray400">
+            {chains
+              .map(
+                chain =>
+                  EIP155_CHAINS[chain as TEIP155Chain]?.name ??
+                  COSMOS_MAINNET_CHAINS[chain as TCosmosChain]?.name ??
+                  chain
+              )
+              .join(', ')}
+          </Text>
+        </Col>
+      </Row>
+
+      <Divider y={2} />
+
+      <Row>
+        <Col>
+          <Text h5>Relay Protocol</Text>
+          <Text color="$gray400">{protocol}</Text>
+        </Col>
+      </Row>
+    </Fragment>
+  )
+}

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

@@ -0,0 +1,22 @@
+import { Col, Row, Text } from '@nextui-org/react'
+
+/**
+ * Types
+ */
+interface IProps {
+  methods: string[]
+}
+
+/**
+ * Component
+ */
+export default function RequestMethodCard({ methods }: IProps) {
+  return (
+    <Row>
+      <Col>
+        <Text h5>Methods</Text>
+        <Text color="$gray400">{methods.map(method => method).join(', ')}</Text>
+      </Col>
+    </Row>
+  )
+}

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

@@ -0,0 +1,27 @@
+import { Container, Modal, Text } from '@nextui-org/react'
+import { Fragment, ReactNode } from 'react'
+
+/**
+ * Types
+ */
+interface IProps {
+  title: string
+  children: ReactNode | ReactNode[]
+}
+
+/**
+ * Component
+ */
+export default function RequestModalContainer({ children, title }: IProps) {
+  return (
+    <Fragment>
+      <Modal.Header>
+        <Text h3>{title}</Text>
+      </Modal.Header>
+
+      <Modal.Body>
+        <Container css={{ padding: 0 }}>{children}</Container>
+      </Modal.Body>
+    </Fragment>
+  )
+}

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

@@ -1,13 +1,14 @@
 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 RequesDetailsCard from '@/components/RequestDetalilsCard'
+import RequestMethodCard from '@/components/RequestMethodCard'
+import RequestModalContainer from '@/components/RequestModalContainer'
 import ModalStore from '@/store/ModalStore'
 import { cosmosAddresses } from '@/utils/CosmosWalletUtil'
 import { eip155Addresses } from '@/utils/EIP155WalletUtil'
 import { isCosmosChain, isEIP155Chain } from '@/utils/HelperUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
-import { Button, Col, Container, Divider, Modal, Row, Text } from '@nextui-org/react'
+import { Button, Col, Divider, Modal, Row, Text } from '@nextui-org/react'
 import { Fragment, useState } from 'react'
 
 export default function SessionProposalModal() {
@@ -26,7 +27,6 @@ export default function SessionProposalModal() {
   const { proposer, permissions, relay } = proposal
   const { chains } = permissions.blockchain
   const { methods } = permissions.jsonrpc
-  const { protocol } = relay
 
   // Add / remove address from EIP155 selection
   function onSelectEIP155(address: string) {
@@ -84,97 +84,61 @@ export default function SessionProposalModal() {
 
   return (
     <Fragment>
-      <Modal.Header>
-        <Text h3>Session Proposal</Text>
-      </Modal.Header>
+      <RequestModalContainer title="Session Proposal">
+        <ProjectInfoCard metadata={proposer.metadata} />
 
-      <Modal.Body>
-        <Container css={{ padding: 0 }}>
-          <ProjectInfoCard metadata={proposer.metadata} />
+        <Divider y={2} />
 
-          <Divider y={2} />
+        <RequesDetailsCard chains={chains} protocol={relay.protocol} />
 
-          <Row>
-            <Col>
-              <Text h5>Blockchains</Text>
-              <Text color="$gray400">
-                {chains
-                  .map(
-                    chain =>
-                      EIP155_CHAINS[chain as TEIP155Chain]?.name ??
-                      COSMOS_MAINNET_CHAINS[chain as TCosmosChain]?.name ??
-                      chain
-                  )
-                  .join(', ')}
-              </Text>
-            </Col>
-          </Row>
+        <Divider y={2} />
 
-          <Divider y={2} />
+        <RequestMethodCard methods={methods} />
 
-          <Row>
-            <Col>
-              <Text h5>Methods</Text>
-              <Text color="$gray400">{methods.map(method => method).join(', ')}</Text>
-            </Col>
-          </Row>
+        <Divider y={2} />
 
-          <Divider y={2} />
+        {chains.map(chain => {
+          if (isEIP155Chain(chain)) {
+            return (
+              <Row>
+                <Col>
+                  <Text h5>Select EIP155 Accounts</Text>
+                  {eip155Addresses.map((address, index) => (
+                    <AccountSelectCard
+                      key={address}
+                      address={address}
+                      index={index}
+                      onSelect={() => onSelectEIP155(address)}
+                      selected={selectedEIP155.includes(address)}
+                    />
+                  ))}
+                </Col>
+              </Row>
+            )
+          } else if (isCosmosChain(chain)) {
+            return (
+              <Fragment>
+                <Divider y={2} />
 
-          <Row>
-            <Col>
-              <Text h5>Relay Protocol</Text>
-              <Text color="$gray400">{protocol}</Text>
-            </Col>
-          </Row>
-
-          {chains.map(chain => {
-            if (isEIP155Chain(chain)) {
-              return (
-                <Fragment>
-                  <Divider y={2} />
-
-                  <Row>
-                    <Col>
-                      <Text h5>Select EIP155 Accounts</Text>
-                      {eip155Addresses.map((address, index) => (
-                        <AccountSelectCard
-                          key={address}
-                          address={address}
-                          index={index}
-                          onSelect={() => onSelectEIP155(address)}
-                          selected={selectedEIP155.includes(address)}
-                        />
-                      ))}
-                    </Col>
-                  </Row>
-                </Fragment>
-              )
-            } else if (isCosmosChain(chain)) {
-              return (
-                <Fragment>
-                  <Divider y={2} />
-
-                  <Row>
-                    <Col>
-                      <Text h5>Select Cosmos Accounts</Text>
-                      {cosmosAddresses.map((address, index) => (
-                        <AccountSelectCard
-                          key={address}
-                          address={address}
-                          index={index}
-                          onSelect={() => onSelectCosmos(address)}
-                          selected={selectedCosmos.includes(address)}
-                        />
-                      ))}
-                    </Col>
-                  </Row>
-                </Fragment>
-              )
-            }
-          })}
-        </Container>
-      </Modal.Body>
+                <Row>
+                  <Col>
+                    <Text h5>Select Cosmos Accounts</Text>
+                    {cosmosAddresses.map((address, index) => (
+                      <AccountSelectCard
+                        key={address}
+                        address={address}
+                        index={index}
+                        onSelect={() => onSelectCosmos(address)}
+                        selected={selectedCosmos.includes(address)}
+                      />
+                    ))}
+                  </Col>
+                </Row>
+              </Fragment>
+            )
+          }
+        })}
+      </RequestModalContainer>
 
       <Modal.Footer>
         <Button auto flat color="error" onClick={onReject}>

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

@@ -1,10 +1,12 @@
 import ProjectInfoCard from '@/components/ProjectInfoCard'
 import RequestDataCard from '@/components/RequestDataCard'
-import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
+import RequesDetailsCard from '@/components/RequestDetalilsCard'
+import RequestMethodCard from '@/components/RequestMethodCard'
+import RequestModalContainer from '@/components/RequestModalContainer'
 import ModalStore from '@/store/ModalStore'
 import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
-import { Button, Col, Container, Divider, Loading, Modal, Row, Text } from '@nextui-org/react'
+import { Button, Divider, Loading, Modal, Text } from '@nextui-org/react'
 import { Fragment, useState } from 'react'
 
 export default function SessionSendTransactionModal() {
@@ -20,9 +22,8 @@ export default function SessionSendTransactionModal() {
   }
 
   // Get required proposal data
-  const { chainId } = requestEvent
+
   const { method, params } = requestEvent.request
-  const { protocol } = requestSession.relay
   const transaction = params[0]
 
   // Handle approve action
@@ -52,48 +53,24 @@ export default function SessionSendTransactionModal() {
 
   return (
     <Fragment>
-      <Modal.Header>
-        <Text h3>Send / Sign Transaction</Text>
-      </Modal.Header>
+      <RequestModalContainer title="Send / Sign Transaction">
+        <ProjectInfoCard metadata={requestSession.peer.metadata} />
 
-      <Modal.Body>
-        <Container css={{ padding: 0 }}>
-          <ProjectInfoCard metadata={requestSession.peer.metadata} />
+        <Divider y={2} />
 
-          <Divider y={2} />
+        <RequestDataCard data={transaction} />
 
-          <RequestDataCard data={transaction} />
+        <Divider y={2} />
 
-          <Divider y={2} />
+        <RequesDetailsCard
+          chains={[requestEvent.chainId ?? '']}
+          protocol={requestSession.relay.protocol}
+        />
 
-          <Row>
-            <Col>
-              <Text h5>Blockchain</Text>
-              <Text color="$gray400">
-                {EIP155_CHAINS[chainId as TEIP155Chain]?.name ?? chainId}
-              </Text>
-            </Col>
-          </Row>
+        <Divider y={2} />
 
-          <Divider y={2} />
-
-          <Row>
-            <Col>
-              <Text h5>Method</Text>
-              <Text color="$gray400">{method}</Text>
-            </Col>
-          </Row>
-
-          <Divider y={2} />
-
-          <Row>
-            <Col>
-              <Text h5>Relay Protocol</Text>
-              <Text color="$gray400">{protocol}</Text>
-            </Col>
-          </Row>
-        </Container>
-      </Modal.Body>
+        <RequestMethodCard methods={[method]} />
+      </RequestModalContainer>
 
       <Modal.Footer>
         <Button auto flat color="error" onClick={onReject} disabled={loading}>

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

@@ -1,10 +1,12 @@
 import ProjectInfoCard from '@/components/ProjectInfoCard'
 import RequestDataCard from '@/components/RequestDataCard'
-import { COSMOS_MAINNET_CHAINS, TCosmosChain } from '@/data/COSMOSData'
+import RequesDetailsCard from '@/components/RequestDetalilsCard'
+import RequestMethodCard from '@/components/RequestMethodCard'
+import RequestModalContainer from '@/components/RequestModalContainer'
 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 { Button, Divider, Modal, Text } from '@nextui-org/react'
 import { Fragment } from 'react'
 
 export default function SessionSignCosmosModal() {
@@ -18,9 +20,7 @@ export default function SessionSignCosmosModal() {
   }
 
   // Get required request data
-  const { chainId } = requestEvent
   const { method, params } = requestEvent.request
-  const { protocol } = requestSession.relay
 
   // Handle approve action (logic varies based on request method)
   async function onApprove() {
@@ -48,48 +48,24 @@ export default function SessionSignCosmosModal() {
 
   return (
     <Fragment>
-      <Modal.Header>
-        <Text h3>Sign Message</Text>
-      </Modal.Header>
+      <RequestModalContainer title="Sign Message">
+        <ProjectInfoCard metadata={requestSession.peer.metadata} />
 
-      <Modal.Body>
-        <Container css={{ padding: 0 }}>
-          <ProjectInfoCard metadata={requestSession.peer.metadata} />
+        <Divider y={2} />
 
-          <Divider y={2} />
+        <RequesDetailsCard
+          chains={[requestEvent.chainId ?? '']}
+          protocol={requestSession.relay.protocol}
+        />
 
-          <Row>
-            <Col>
-              <Text h5>Blockchain</Text>
-              <Text color="$gray400">
-                {COSMOS_MAINNET_CHAINS[chainId as TCosmosChain]?.name ?? chainId}
-              </Text>
-            </Col>
-          </Row>
+        <Divider y={2} />
 
-          <Divider y={2} />
+        <RequestDataCard data={params} />
 
-          <RequestDataCard data={params} />
+        <Divider y={2} />
 
-          <Divider y={2} />
-
-          <Row>
-            <Col>
-              <Text h5>Method</Text>
-              <Text color="$gray400">{method}</Text>
-            </Col>
-          </Row>
-
-          <Divider y={2} />
-
-          <Row>
-            <Col>
-              <Text h5>Relay Protocol</Text>
-              <Text color="$gray400">{protocol}</Text>
-            </Col>
-          </Row>
-        </Container>
-      </Modal.Body>
+        <RequestMethodCard methods={[method]} />
+      </RequestModalContainer>
 
       <Modal.Footer>
         <Button auto flat color="error" onClick={onReject}>

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

@@ -1,10 +1,12 @@
 import ProjectInfoCard from '@/components/ProjectInfoCard'
-import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
+import RequesDetailsCard from '@/components/RequestDetalilsCard'
+import RequestMethodCard from '@/components/RequestMethodCard'
+import RequestModalContainer from '@/components/RequestModalContainer'
 import ModalStore from '@/store/ModalStore'
 import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil'
 import { getSignParamsMessage } from '@/utils/HelperUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
-import { Button, Col, Container, Divider, Modal, Row, Text } from '@nextui-org/react'
+import { Button, Col, Divider, Modal, Row, Text } from '@nextui-org/react'
 import { Fragment } from 'react'
 
 export default function SessionSignModal() {
@@ -18,9 +20,7 @@ export default function SessionSignModal() {
   }
 
   // Get required request data
-  const { chainId } = requestEvent
   const { method, params } = requestEvent.request
-  const { protocol } = requestSession.relay
 
   // Get message, convert it to UTF8 string if it is valid hex
   const message = getSignParamsMessage(params)
@@ -51,53 +51,29 @@ export default function SessionSignModal() {
 
   return (
     <Fragment>
-      <Modal.Header>
-        <Text h3>Sign Message</Text>
-      </Modal.Header>
+      <RequestModalContainer title="Sign Message">
+        <ProjectInfoCard metadata={requestSession.peer.metadata} />
 
-      <Modal.Body>
-        <Container css={{ padding: 0 }}>
-          <ProjectInfoCard metadata={requestSession.peer.metadata} />
+        <Divider y={2} />
 
-          <Divider y={2} />
+        <RequesDetailsCard
+          chains={[requestEvent.chainId ?? '']}
+          protocol={requestSession.relay.protocol}
+        />
 
-          <Row>
-            <Col>
-              <Text h5>Blockchain</Text>
-              <Text color="$gray400">
-                {EIP155_CHAINS[chainId as TEIP155Chain]?.name ?? chainId}
-              </Text>
-            </Col>
-          </Row>
+        <Divider y={2} />
 
-          <Divider y={2} />
+        <Row>
+          <Col>
+            <Text h5>Message</Text>
+            <Text color="$gray400">{message}</Text>
+          </Col>
+        </Row>
 
-          <Row>
-            <Col>
-              <Text h5>Message</Text>
-              <Text color="$gray400">{message}</Text>
-            </Col>
-          </Row>
+        <Divider y={2} />
 
-          <Divider y={2} />
-
-          <Row>
-            <Col>
-              <Text h5>Method</Text>
-              <Text color="$gray400">{method}</Text>
-            </Col>
-          </Row>
-
-          <Divider y={2} />
-
-          <Row>
-            <Col>
-              <Text h5>Relay Protocol</Text>
-              <Text color="$gray400">{protocol}</Text>
-            </Col>
-          </Row>
-        </Container>
-      </Modal.Body>
+        <RequestMethodCard methods={[method]} />
+      </RequestModalContainer>
 
       <Modal.Footer>
         <Button auto flat color="error" onClick={onReject}>

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

@@ -1,11 +1,13 @@
 import ProjectInfoCard from '@/components/ProjectInfoCard'
 import RequestDataCard from '@/components/RequestDataCard'
-import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
+import RequesDetailsCard from '@/components/RequestDetalilsCard'
+import RequestMethodCard from '@/components/RequestMethodCard'
+import RequestModalContainer from '@/components/RequestModalContainer'
 import ModalStore from '@/store/ModalStore'
 import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil'
 import { getSignTypedDataParamsData } from '@/utils/HelperUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
-import { Button, Col, Container, Divider, Modal, Row, Text } from '@nextui-org/react'
+import { Button, Divider, Modal, Text } from '@nextui-org/react'
 import { Fragment } from 'react'
 
 export default function SessionSignTypedDataModal() {
@@ -19,9 +21,7 @@ export default function SessionSignTypedDataModal() {
   }
 
   // Get required request data
-  const { chainId } = requestEvent
   const { method, params } = requestEvent.request
-  const { protocol } = requestSession.relay
 
   // Get data
   const data = getSignTypedDataParamsData(params)
@@ -52,48 +52,24 @@ export default function SessionSignTypedDataModal() {
 
   return (
     <Fragment>
-      <Modal.Header>
-        <Text h3>Sign Typed Data</Text>
-      </Modal.Header>
+      <RequestModalContainer title="Sign Typed Data">
+        <ProjectInfoCard metadata={requestSession.peer.metadata} />
 
-      <Modal.Body>
-        <Container css={{ padding: 0 }}>
-          <ProjectInfoCard metadata={requestSession.peer.metadata} />
+        <Divider y={2} />
 
-          <Divider y={2} />
+        <RequesDetailsCard
+          chains={[requestEvent.chainId ?? '']}
+          protocol={requestSession.relay.protocol}
+        />
 
-          <Row>
-            <Col>
-              <Text h5>Blockchain</Text>
-              <Text color="$gray400">
-                {EIP155_CHAINS[chainId as TEIP155Chain]?.name ?? chainId}
-              </Text>
-            </Col>
-          </Row>
+        <Divider y={2} />
 
-          <Divider y={2} />
+        <RequestDataCard data={data} />
 
-          <RequestDataCard data={data} />
+        <Divider y={2} />
 
-          <Divider y={2} />
-
-          <Row>
-            <Col>
-              <Text h5>Method</Text>
-              <Text color="$gray400">{method}</Text>
-            </Col>
-          </Row>
-
-          <Divider y={2} />
-
-          <Row>
-            <Col>
-              <Text h5>Relay Protocol</Text>
-              <Text color="$gray400">{protocol}</Text>
-            </Col>
-          </Row>
-        </Container>
-      </Modal.Body>
+        <RequestMethodCard methods={[method]} />
+      </RequestModalContainer>
 
       <Modal.Footer>
         <Button auto flat color="error" onClick={onReject}>

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

@@ -1,7 +1,9 @@
 import ProjectInfoCard from '@/components/ProjectInfoCard'
-import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
+import RequesDetailsCard from '@/components/RequestDetalilsCard'
+import RequestMethodCard from '@/components/RequestMethodCard'
+import RequestModalContainer from '@/components/RequestModalContainer'
 import ModalStore from '@/store/ModalStore'
-import { Button, Col, Container, Divider, Modal, Row, Text } from '@nextui-org/react'
+import { Button, Divider, Modal, Text } from '@nextui-org/react'
 import { Fragment } from 'react'
 
 export default function SessionUnsuportedMethodModal() {
@@ -15,40 +17,24 @@ export default function SessionUnsuportedMethodModal() {
   }
 
   // Get required request data
-  const { chainId } = requestEvent
   const { method } = requestEvent.request
 
   return (
     <Fragment>
-      <Modal.Header>
-        <Text h3>Unsuported Method</Text>
-      </Modal.Header>
+      <RequestModalContainer title="Unsuported Method">
+        <ProjectInfoCard metadata={requestSession.peer.metadata} />
 
-      <Modal.Body>
-        <Container css={{ padding: 0 }}>
-          <ProjectInfoCard metadata={requestSession.peer.metadata} />
+        <Divider y={2} />
 
-          <Divider y={2} />
+        <RequesDetailsCard
+          chains={[requestEvent.chainId ?? '']}
+          protocol={requestSession.relay.protocol}
+        />
 
-          <Row>
-            <Col>
-              <Text h5>Blockchain</Text>
-              <Text color="$gray400">
-                {EIP155_CHAINS[chainId as TEIP155Chain]?.name ?? chainId}
-              </Text>
-            </Col>
-          </Row>
+        <Divider y={2} />
 
-          <Divider y={2} />
-
-          <Row>
-            <Col>
-              <Text h5>Method</Text>
-              <Text color="$gray400">{method}</Text>
-            </Col>
-          </Row>
-        </Container>
-      </Modal.Body>
+        <RequestMethodCard methods={[method]} />
+      </RequestModalContainer>
 
       <Modal.Footer>
         <Button auto flat color="error" onClick={ModalStore.close}>