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