deep-stack/wallet-connect-web-examples
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleanup and unify request data display

Browse Source
This commit is contained in:
Ilja 2022-03-04 12:37:17 +02:00
parent f4df97e97b
commit ae1a9f8f7c
9 changed files with 56 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
wallets/react-wallet-v2/src/components/ProjectInfoCard.tsx
View File

@ -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,18 +15,14 @@ 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>
<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>
)
}

28
wallets/react-wallet-v2/src/components/RequestDataCard.tsx Normal file
View File

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

2
wallets/react-wallet-v2/src/pages/session.tsx
View File

@ -74,6 +74,8 @@ export default function SessionPage() {
<ProjectInfoCard metadata={session.peer.metadata} />
<Divider y={2} />
{chains.map(chain => {
if (isEIP155Chain(chain)) {
return (

2
wallets/react-wallet-v2/src/views/SessionProposalModal.tsx
View File

@ -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>

51
wallets/react-wallet-v2/src/views/SessionSendTransactionModal.tsx
View File

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

16
wallets/react-wallet-v2/src/views/SessionSignCosmosModal.tsx
View File

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

2
wallets/react-wallet-v2/src/views/SessionSignModal.tsx
View File

@ -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>

44
wallets/react-wallet-v2/src/views/SessionSignTypedDataModal.tsx
View File

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

2
wallets/react-wallet-v2/src/views/SessionUnsuportedMethodModal.tsx
View File

@ -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>