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

Cleanup session project data display

Browse Source
This commit is contained in:
Ilja 2022-03-04 12:24:15 +02:00
parent 749e8f9bd4
commit f4df97e97b
12 changed files with 61 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
wallets/react-wallet-v2/package.json
View File

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

33
wallets/react-wallet-v2/src/components/ProjectInfoCard.tsx Normal file
View File

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

0
wallets/react-wallet-v2/src/utils/CosmosUtil.ts → wallets/react-wallet-v2/src/lib/Cosmos.ts
View File

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

@ -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">
<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>
<ProjectInfoCard metadata={session.peer.metadata} />
{chains.map(chain => {
if (isEIP155Chain(chain)) {
return (
<Fragment key={chain}>
<Divider y={1} />
<Row>
<Col>
<Text h5>EIP155 Accounts</Text>

2
wallets/react-wallet-v2/src/utils/CosmosWalletUtil.ts
View File

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

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

@ -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">
<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} />
<ProjectInfoCard metadata={proposer.metadata} />
<Row>
<Col>

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

@ -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 {
Avatar,
Button,
Col,
Container,
Divider,
Link,
Loading,
Modal,
Row,
Text
} from '@nextui-org/react'
import { Button, Col, Container, Divider, 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">
<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} />
<ProjectInfoCard metadata={requestSession.peer.metadata} />
<Row>
<Col>

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

@ -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">
<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} />
<ProjectInfoCard metadata={requestSession.peer.metadata} />
<Row>
<Col>

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

@ -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">
<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} />
<ProjectInfoCard metadata={requestSession.peer.metadata} />
<Row>
<Col>

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

@ -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">
<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} />
<ProjectInfoCard metadata={requestSession.peer.metadata} />
<Row>
<Col>

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

@ -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">
<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} />
<ProjectInfoCard metadata={requestSession.peer.metadata} />
<Row>
<Col>

8
wallets/react-wallet-v2/yarn.lock
View File

@ -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:
version "8.4.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.4.0.tgz#8e6d17c7436649e98c4c2189868562921ef563de"
integrity sha512-CFotdUcMY18nGRo5KGsnNxpznzhkopOcOo0InID+sgQssPrzjvsyKZPvOgymTFeHrFuC3Tzdf2YndhXtULK9Iw==
eslint-config-prettier@8.5.0:
version "8.5.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.6:
version "0.3.6"