From f4df97e97b5b9ef00bfcbe94c151a6f65943c807 Mon Sep 17 00:00:00 2001 From: Ilja Date: Fri, 4 Mar 2022 12:24:15 +0200 Subject: [PATCH] Cleanup session project data display --- wallets/react-wallet-v2/package.json | 2 +- .../src/components/ProjectInfoCard.tsx | 33 +++++++++++++++++++ .../{utils/CosmosUtil.ts => lib/Cosmos.ts} | 0 wallets/react-wallet-v2/src/pages/session.tsx | 20 +++-------- .../src/utils/CosmosWalletUtil.ts | 2 +- .../src/views/SessionProposalModal.tsx | 16 ++------- .../src/views/SessionSendTransactionModal.tsx | 27 ++------------- .../src/views/SessionSignCosmosModal.tsx | 16 ++------- .../src/views/SessionSignModal.tsx | 16 ++------- .../src/views/SessionSignTypedDataModal.tsx | 16 ++------- .../views/SessionUnsuportedMethodModal.tsx | 16 ++------- wallets/react-wallet-v2/yarn.lock | 8 ++--- 12 files changed, 61 insertions(+), 111 deletions(-) create mode 100644 wallets/react-wallet-v2/src/components/ProjectInfoCard.tsx rename wallets/react-wallet-v2/src/{utils/CosmosUtil.ts => lib/Cosmos.ts} (100%) diff --git a/wallets/react-wallet-v2/package.json b/wallets/react-wallet-v2/package.json index c4271fc..faf912b 100644 --- a/wallets/react-wallet-v2/package.json +++ b/wallets/react-wallet-v2/package.json @@ -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" } diff --git a/wallets/react-wallet-v2/src/components/ProjectInfoCard.tsx b/wallets/react-wallet-v2/src/components/ProjectInfoCard.tsx new file mode 100644 index 0000000..86539cb --- /dev/null +++ b/wallets/react-wallet-v2/src/components/ProjectInfoCard.tsx @@ -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 ( + + + + + + + {name} + {url} + + + + + + ) +} diff --git a/wallets/react-wallet-v2/src/utils/CosmosUtil.ts b/wallets/react-wallet-v2/src/lib/Cosmos.ts similarity index 100% rename from wallets/react-wallet-v2/src/utils/CosmosUtil.ts rename to wallets/react-wallet-v2/src/lib/Cosmos.ts diff --git a/wallets/react-wallet-v2/src/pages/session.tsx b/wallets/react-wallet-v2/src/pages/session.tsx index 71ca899..506acef 100644 --- a/wallets/react-wallet-v2/src/pages/session.tsx +++ b/wallets/react-wallet-v2/src/pages/session.tsx @@ -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() { - - - - - - {name} - - {truncate(url?.split('https://')[1] ?? 'Unknown', 23)} - - - + {chains.map(chain => { if (isEIP155Chain(chain)) { return ( - - EIP155 Accounts diff --git a/wallets/react-wallet-v2/src/utils/CosmosWalletUtil.ts b/wallets/react-wallet-v2/src/utils/CosmosWalletUtil.ts index 4eb2f9f..5d988e7 100644 --- a/wallets/react-wallet-v2/src/utils/CosmosWalletUtil.ts +++ b/wallets/react-wallet-v2/src/utils/CosmosWalletUtil.ts @@ -1,4 +1,4 @@ -import { Cosmos } from '@/utils/CosmosUtil' +import { Cosmos } from '@/lib/Cosmos' export let wallet1: Cosmos export let wallet2: Cosmos diff --git a/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx b/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx index 45b4bb2..f88d5b8 100644 --- a/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx +++ b/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx @@ -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() { - - - - - - {name} - {url} - - - - + diff --git a/wallets/react-wallet-v2/src/views/SessionSendTransactionModal.tsx b/wallets/react-wallet-v2/src/views/SessionSendTransactionModal.tsx index 0f8508e..b13b0a5 100644 --- a/wallets/react-wallet-v2/src/views/SessionSendTransactionModal.tsx +++ b/wallets/react-wallet-v2/src/views/SessionSendTransactionModal.tsx @@ -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() { - - - - - - {name} - {url} - - - - + diff --git a/wallets/react-wallet-v2/src/views/SessionSignCosmosModal.tsx b/wallets/react-wallet-v2/src/views/SessionSignCosmosModal.tsx index ada2364..798acf7 100644 --- a/wallets/react-wallet-v2/src/views/SessionSignCosmosModal.tsx +++ b/wallets/react-wallet-v2/src/views/SessionSignCosmosModal.tsx @@ -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() { - - - - - - {name} - {url} - - - - + diff --git a/wallets/react-wallet-v2/src/views/SessionSignModal.tsx b/wallets/react-wallet-v2/src/views/SessionSignModal.tsx index 991111a..be6516d 100644 --- a/wallets/react-wallet-v2/src/views/SessionSignModal.tsx +++ b/wallets/react-wallet-v2/src/views/SessionSignModal.tsx @@ -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() { - - - - - - {name} - {url} - - - - + diff --git a/wallets/react-wallet-v2/src/views/SessionSignTypedDataModal.tsx b/wallets/react-wallet-v2/src/views/SessionSignTypedDataModal.tsx index 3b3211a..afb9fc5 100644 --- a/wallets/react-wallet-v2/src/views/SessionSignTypedDataModal.tsx +++ b/wallets/react-wallet-v2/src/views/SessionSignTypedDataModal.tsx @@ -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() { - - - - - - {name} - {url} - - - - + diff --git a/wallets/react-wallet-v2/src/views/SessionUnsuportedMethodModal.tsx b/wallets/react-wallet-v2/src/views/SessionUnsuportedMethodModal.tsx index 8b939a2..b1e177f 100644 --- a/wallets/react-wallet-v2/src/views/SessionUnsuportedMethodModal.tsx +++ b/wallets/react-wallet-v2/src/views/SessionUnsuportedMethodModal.tsx @@ -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 ( @@ -26,17 +26,7 @@ export default function SessionUnsuportedMethodModal() { - - - - - - {name} - {url} - - - - + diff --git a/wallets/react-wallet-v2/yarn.lock b/wallets/react-wallet-v2/yarn.lock index 847a587..77e32c6 100644 --- a/wallets/react-wallet-v2/yarn.lock +++ b/wallets/react-wallet-v2/yarn.lock @@ -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"