diff --git a/wallets/react-wallet-v2/src/components/RequestDetalilsCard.tsx b/wallets/react-wallet-v2/src/components/RequestDetalilsCard.tsx
new file mode 100644
index 0000000..2a728ab
--- /dev/null
+++ b/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 (
+
+
+
+ Blockchain(s)
+
+ {chains
+ .map(
+ chain =>
+ EIP155_CHAINS[chain as TEIP155Chain]?.name ??
+ COSMOS_MAINNET_CHAINS[chain as TCosmosChain]?.name ??
+ chain
+ )
+ .join(', ')}
+
+
+
+
+
+
+
+
+ Relay Protocol
+ {protocol}
+
+
+
+ )
+}
diff --git a/wallets/react-wallet-v2/src/components/RequestMethodCard.tsx b/wallets/react-wallet-v2/src/components/RequestMethodCard.tsx
new file mode 100644
index 0000000..ee04eff
--- /dev/null
+++ b/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 (
+
+
+ Methods
+ {methods.map(method => method).join(', ')}
+
+
+ )
+}
diff --git a/wallets/react-wallet-v2/src/components/RequestModalContainer.tsx b/wallets/react-wallet-v2/src/components/RequestModalContainer.tsx
new file mode 100644
index 0000000..6d9d1e1
--- /dev/null
+++ b/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 (
+
+
+ {title}
+
+
+
+ {children}
+
+
+ )
+}
diff --git a/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx b/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx
index 3583df5..872fca0 100644
--- a/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx
+++ b/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 (
-
- Session Proposal
-
+
+
-
-
-
+
-
+
-
-
- Blockchains
-
- {chains
- .map(
- chain =>
- EIP155_CHAINS[chain as TEIP155Chain]?.name ??
- COSMOS_MAINNET_CHAINS[chain as TCosmosChain]?.name ??
- chain
- )
- .join(', ')}
-
-
-
+
-
+
-
-
- Methods
- {methods.map(method => method).join(', ')}
-
-
+
-
+ {chains.map(chain => {
+ if (isEIP155Chain(chain)) {
+ return (
+
+
+ Select EIP155 Accounts
+ {eip155Addresses.map((address, index) => (
+ onSelectEIP155(address)}
+ selected={selectedEIP155.includes(address)}
+ />
+ ))}
+
+
+ )
+ } else if (isCosmosChain(chain)) {
+ return (
+
+
-
-
- Relay Protocol
- {protocol}
-
-
-
- {chains.map(chain => {
- if (isEIP155Chain(chain)) {
- return (
-
-
-
-
-
- Select EIP155 Accounts
- {eip155Addresses.map((address, index) => (
- onSelectEIP155(address)}
- selected={selectedEIP155.includes(address)}
- />
- ))}
-
-
-
- )
- } else if (isCosmosChain(chain)) {
- return (
-
-
-
-
-
- Select Cosmos Accounts
- {cosmosAddresses.map((address, index) => (
- onSelectCosmos(address)}
- selected={selectedCosmos.includes(address)}
- />
- ))}
-
-
-
- )
- }
- })}
-
-
+
+
+ Select Cosmos Accounts
+ {cosmosAddresses.map((address, index) => (
+ onSelectCosmos(address)}
+ selected={selectedCosmos.includes(address)}
+ />
+ ))}
+
+
+
+ )
+ }
+ })}
+