diff --git a/wallets/react-wallet-v2/public/pairings-icon.svg b/wallets/react-wallet-v2/public/pairings-icon.svg index 05d38a8..66f418a 100644 --- a/wallets/react-wallet-v2/public/pairings-icon.svg +++ b/wallets/react-wallet-v2/public/pairings-icon.svg @@ -1,57 +1,7 @@ - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/wallets/react-wallet-v2/src/components/PairingCard.tsx b/wallets/react-wallet-v2/src/components/PairingCard.tsx new file mode 100644 index 0000000..67e811c --- /dev/null +++ b/wallets/react-wallet-v2/src/components/PairingCard.tsx @@ -0,0 +1,51 @@ +import { truncate } from '@/utils/HelperUtil' +import { Avatar, Button, Card, Link, Text } from '@nextui-org/react' + +/** + * Types + */ +interface IProps { + logo?: string + name?: string + url?: string + onDelete: () => Promise +} + +/** + * Component + */ +export default function PairingCard({ logo, name, url, onDelete }: IProps) { + return ( + + + +
+ + {name} + + + {truncate(url?.split('https://')[1] ?? 'Unknown', 23)} + +
+ + + + ) +} diff --git a/wallets/react-wallet-v2/src/components/SessionCard.tsx b/wallets/react-wallet-v2/src/components/SessionCard.tsx new file mode 100644 index 0000000..8119fef --- /dev/null +++ b/wallets/react-wallet-v2/src/components/SessionCard.tsx @@ -0,0 +1,51 @@ +import { truncate } from '@/utils/HelperUtil' +import { Avatar, Button, Card, Link, Text } from '@nextui-org/react' + +/** + * Types + */ +interface IProps { + logo?: string + name?: string + url?: string + onDelete: () => Promise +} + +/** + * Component + */ +export default function SessionCard({ logo, name, url, onDelete }: IProps) { + return ( + + + +
+ + {name} + + + {truncate(url?.split('https://')[1] ?? 'Unknown', 23)} + +
+ +
+
+ ) +} diff --git a/wallets/react-wallet-v2/src/data/EIP155Data.ts b/wallets/react-wallet-v2/src/data/EIP155Data.ts index 58f55cf..d44c514 100644 --- a/wallets/react-wallet-v2/src/data/EIP155Data.ts +++ b/wallets/react-wallet-v2/src/data/EIP155Data.ts @@ -62,6 +62,6 @@ export const EIP155_SIGNING_METHODS = { ETH_SIGN_TYPED_DATA: 'eth_signTypedData', ETH_SIGN_TYPED_DATA_V3: 'eth_signTypedData_v3', ETH_SIGN_TYPED_DATA_V4: 'eth_signTypedData_v4', - ETH_SIGN_RAW_TRANSACTION: 'eth_sendRawTransaction', + ETH_SEND_RAW_TRANSACTION: 'eth_sendRawTransaction', ETH_SEND_TRANSACTION: 'eth_sendTransaction' } diff --git a/wallets/react-wallet-v2/src/pages/pairings.tsx b/wallets/react-wallet-v2/src/pages/pairings.tsx index 933c433..f7d45b1 100644 --- a/wallets/react-wallet-v2/src/pages/pairings.tsx +++ b/wallets/react-wallet-v2/src/pages/pairings.tsx @@ -1,14 +1,43 @@ import PageHeader from '@/components/PageHeader' +import PairingCard from '@/components/PairingCard' import { walletConnectClient } from '@/utils/WalletConnectUtil' -import { Fragment } from 'react' +import { Text } from '@nextui-org/react' +import { ERROR } from '@walletconnect/utils' +import { Fragment, useState } from 'react' export default function PairingsPage() { - console.log(walletConnectClient.session.values) - console.log(walletConnectClient.session.history.pending) + const [pairings, setPairings] = useState(walletConnectClient.pairing.values) + + async function onDelete(topic: string) { + await walletConnectClient.pairing.delete({ + topic, + reason: ERROR.DELETED.format() + }) + const newPairings = pairings.filter(pairing => pairing.topic !== topic) + setPairings(newPairings) + } return ( Pairings + {pairings.length ? ( + pairings.map(pairing => { + const { metadata } = pairing.state + console.log(pairing) + + return ( + onDelete(pairing.topic)} + /> + ) + }) + ) : ( + No pairings + )} ) } diff --git a/wallets/react-wallet-v2/src/pages/sessions.tsx b/wallets/react-wallet-v2/src/pages/sessions.tsx index 2e6b6b5..e240884 100644 --- a/wallets/react-wallet-v2/src/pages/sessions.tsx +++ b/wallets/react-wallet-v2/src/pages/sessions.tsx @@ -1,14 +1,42 @@ import PageHeader from '@/components/PageHeader' +import SessionCard from '@/components/SessionCard' import { walletConnectClient } from '@/utils/WalletConnectUtil' -import { Fragment } from 'react' +import { Text } from '@nextui-org/react' +import { ERROR } from '@walletconnect/utils' +import { Fragment, useState } from 'react' export default function SessionsPage() { - console.log(walletConnectClient.session.values) - console.log(walletConnectClient.session.history.pending) + const [sessions, setSessions] = useState(walletConnectClient.session.values) + + async function onDelete(topic: string) { + await walletConnectClient.session.delete({ + topic, + reason: ERROR.DELETED.format() + }) + const newSessions = sessions.filter(sessions => sessions.topic !== topic) + setSessions(newSessions) + } return ( Sessions + {sessions.length ? ( + sessions.map(session => { + const { name, icons, url } = session.peer.metadata + + return ( + onDelete(session.topic)} + /> + ) + }) + ) : ( + No sessions + )} ) }