Merge branch 'main' of github.com:WalletConnect/examples into main

wallets/react-wallet-v2/public/pairings-icon.svg

@@ -1,57 +1,7 @@
 <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M408 336H344C339.582 336 336 339.582 336 344V408C336 412.418 339.582 416 344 416H408C412.418 416 416 412.418 416 408V344C416 339.582 412.418 336 408 336Z" fill="url(#paint0_linear_101_5)"/>
+<path d="M208 352H144C118.539 352 94.1212 341.886 76.1178 323.882C58.1143 305.879 48 281.461 48 256C48 230.539 58.1143 206.121 76.1178 188.118C94.1212 170.114 118.539 160 144 160H208M304 160H368C393.461 160 417.879 170.114 435.882 188.118C453.886 206.121 464 230.539 464 256C464 281.461 453.886 305.879 435.882 323.882C417.879 341.886 393.461 352 368 352H304M163.29 256H350.71" stroke="url(#paint0_linear_112_7)" stroke-width="36" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M328 272H280C275.582 272 272 275.582 272 280V328C272 332.418 275.582 336 280 336H328C332.418 336 336 332.418 336 328V280C336 275.582 332.418 272 328 272Z" fill="url(#paint1_linear_101_5)"/>
-<path d="M472 416H424C419.582 416 416 419.582 416 424V472C416 476.418 419.582 480 424 480H472C476.418 480 480 476.418 480 472V424C480 419.582 476.418 416 472 416Z" fill="url(#paint2_linear_101_5)"/>
-<path d="M472 272H440C435.582 272 432 275.582 432 280V312C432 316.418 435.582 320 440 320H472C476.418 320 480 316.418 480 312V280C480 275.582 476.418 272 472 272Z" fill="url(#paint3_linear_101_5)"/>
-<path d="M312 432H280C275.582 432 272 435.582 272 440V472C272 476.418 275.582 480 280 480H312C316.418 480 320 476.418 320 472V440C320 435.582 316.418 432 312 432Z" fill="url(#paint4_linear_101_5)"/>
-<path d="M408 96H344C339.582 96 336 99.5817 336 104V168C336 172.418 339.582 176 344 176H408C412.418 176 416 172.418 416 168V104C416 99.5817 412.418 96 408 96Z" fill="url(#paint5_linear_101_5)"/>
-<path d="M448 48H304C295.163 48 288 55.1634 288 64V208C288 216.837 295.163 224 304 224H448C456.837 224 464 216.837 464 208V64C464 55.1634 456.837 48 448 48Z" stroke="url(#paint6_linear_101_5)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M168 96H104C99.5817 96 96 99.5817 96 104V168C96 172.418 99.5817 176 104 176H168C172.418 176 176 172.418 176 168V104C176 99.5817 172.418 96 168 96Z" fill="url(#paint7_linear_101_5)"/>
-<path d="M208 48H64C55.1634 48 48 55.1634 48 64V208C48 216.837 55.1634 224 64 224H208C216.837 224 224 216.837 224 208V64C224 55.1634 216.837 48 208 48Z" stroke="url(#paint8_linear_101_5)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M168 336H104C99.5817 336 96 339.582 96 344V408C96 412.418 99.5817 416 104 416H168C172.418 416 176 412.418 176 408V344C176 339.582 172.418 336 168 336Z" fill="url(#paint9_linear_101_5)"/>
-<path d="M208 288H64C55.1634 288 48 295.163 48 304V448C48 456.837 55.1634 464 64 464H208C216.837 464 224 456.837 224 448V304C224 295.163 216.837 288 208 288Z" stroke="url(#paint10_linear_101_5)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
 <defs>
-<linearGradient id="paint0_linear_101_5" x1="336" y1="336.006" x2="416.753" y2="415.226" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint0_linear_112_7" x1="48.0001" y1="160.015" x2="197.341" y2="477.442" gradientUnits="userSpaceOnUse">
-<stop stop-color="#A562D5"/>
-<stop offset="1" stop-color="#306FEB"/>
-</linearGradient>
-<linearGradient id="paint1_linear_101_5" x1="272" y1="272.005" x2="336.603" y2="335.381" gradientUnits="userSpaceOnUse">
-<stop stop-color="#A562D5"/>
-<stop offset="1" stop-color="#306FEB"/>
-</linearGradient>
-<linearGradient id="paint2_linear_101_5" x1="416" y1="416.005" x2="480.603" y2="479.381" gradientUnits="userSpaceOnUse">
-<stop stop-color="#A562D5"/>
-<stop offset="1" stop-color="#306FEB"/>
-</linearGradient>
-<linearGradient id="paint3_linear_101_5" x1="432" y1="272.004" x2="480.452" y2="319.536" gradientUnits="userSpaceOnUse">
-<stop stop-color="#A562D5"/>
-<stop offset="1" stop-color="#306FEB"/>
-</linearGradient>
-<linearGradient id="paint4_linear_101_5" x1="272" y1="432.004" x2="320.452" y2="479.536" gradientUnits="userSpaceOnUse">
-<stop stop-color="#A562D5"/>
-<stop offset="1" stop-color="#306FEB"/>
-</linearGradient>
-<linearGradient id="paint5_linear_101_5" x1="336" y1="96.0063" x2="416.753" y2="175.226" gradientUnits="userSpaceOnUse">
-<stop stop-color="#A562D5"/>
-<stop offset="1" stop-color="#306FEB"/>
-</linearGradient>
-<linearGradient id="paint6_linear_101_5" x1="288" y1="48.0139" x2="465.657" y2="222.298" gradientUnits="userSpaceOnUse">
-<stop stop-color="#A562D5"/>
-<stop offset="1" stop-color="#306FEB"/>
-</linearGradient>
-<linearGradient id="paint7_linear_101_5" x1="96" y1="96.0063" x2="176.753" y2="175.226" gradientUnits="userSpaceOnUse">
-<stop stop-color="#A562D5"/>
-<stop offset="1" stop-color="#306FEB"/>
-</linearGradient>
-<linearGradient id="paint8_linear_101_5" x1="48" y1="48.0139" x2="225.657" y2="222.298" gradientUnits="userSpaceOnUse">
-<stop stop-color="#A562D5"/>
-<stop offset="1" stop-color="#306FEB"/>
-</linearGradient>
-<linearGradient id="paint9_linear_101_5" x1="96" y1="336.006" x2="176.753" y2="415.226" gradientUnits="userSpaceOnUse">
-<stop stop-color="#A562D5"/>
-<stop offset="1" stop-color="#306FEB"/>
-</linearGradient>
-<linearGradient id="paint10_linear_101_5" x1="48" y1="288.014" x2="225.657" y2="462.298" gradientUnits="userSpaceOnUse">
 <stop stop-color="#A562D5"/>
 <stop offset="1" stop-color="#306FEB"/>
 </linearGradient>

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<void>
+}
+
+/**
+ * Component
+ */
+export default function PairingCard({ logo, name, url, onDelete }: IProps) {
+  return (
+    <Card
+      bordered
+      borderWeight="light"
+      css={{
+        position: 'relative',
+        marginBottom: '$6',
+        minHeight: '70px'
+      }}
+    >
+      <Card.Body
+        css={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          overflow: 'hidden'
+        }}
+      >
+        <Avatar src={logo} />
+        <div style={{ flex: 1 }}>
+          <Text h5 css={{ marginLeft: '$9' }}>
+            {name}
+          </Text>
+          <Link href={url} css={{ marginLeft: '$9' }}>
+            {truncate(url?.split('https://')[1] ?? 'Unknown', 23)}
+          </Link>
+        </div>
+        <Button size="xs" color="error" flat onClick={onDelete}>
+          DELETE
+        </Button>
+      </Card.Body>
+    </Card>
+  )
+}

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<void>
+}
+
+/**
+ * Component
+ */
+export default function SessionCard({ logo, name, url, onDelete }: IProps) {
+  return (
+    <Card
+      bordered
+      borderWeight="light"
+      css={{
+        position: 'relative',
+        marginBottom: '$6',
+        minHeight: '70px'
+      }}
+    >
+      <Card.Body
+        css={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          overflow: 'hidden'
+        }}
+      >
+        <Avatar src={logo} />
+        <div style={{ flex: 1 }}>
+          <Text h5 css={{ marginLeft: '$9' }}>
+            {name}
+          </Text>
+          <Link href={url} css={{ marginLeft: '$9' }}>
+            {truncate(url?.split('https://')[1] ?? 'Unknown', 23)}
+          </Link>
+        </div>
+        <Button size="xs" color="error" flat onClick={onDelete}>
+          DELETE
+        </Button>
+      </Card.Body>
+    </Card>
+  )
+}

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'
 }

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)
+  const [pairings, setPairings] = useState(walletConnectClient.pairing.values)
-  console.log(walletConnectClient.session.history.pending)
+
+  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 (
     <Fragment>
       <PageHeader>Pairings</PageHeader>
+      {pairings.length ? (
+        pairings.map(pairing => {
+          const { metadata } = pairing.state
+          console.log(pairing)
+
+          return (
+            <PairingCard
+              key={pairing.topic}
+              logo={metadata?.icons[0]}
+              url={metadata?.url}
+              name={metadata?.name}
+              onDelete={() => onDelete(pairing.topic)}
+            />
+          )
+        })
+      ) : (
+        <Text css={{ opacity: '0.5', textAlign: 'center', marginTop: '$20' }}>No pairings</Text>
+      )}
     </Fragment>
   )
 }

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)
+  const [sessions, setSessions] = useState(walletConnectClient.session.values)
-  console.log(walletConnectClient.session.history.pending)
+
+  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 (
     <Fragment>
       <PageHeader>Sessions</PageHeader>
+      {sessions.length ? (
+        sessions.map(session => {
+          const { name, icons, url } = session.peer.metadata
+
+          return (
+            <SessionCard
+              key={session.topic}
+              name={name}
+              logo={icons[0]}
+              url={url}
+              onDelete={() => onDelete(session.topic)}
+            />
+          )
+        })
+      ) : (
+        <Text css={{ opacity: '0.5', textAlign: 'center', marginTop: '$20' }}>No sessions</Text>
+      )}
     </Fragment>
   )
 }